<template>
  <van-popup
    style="width: 218px"
    :close-on-click-overlay="false"
    @click-overlay="emit('popupClose')"
    v-model:show="props.showCenter"
    round
  >
    <div style="padding: 25px 0 0">
      <div v-for="item in list" :key="item.comboName">
        <div class="_title">{{ item.comboName }}</div>
        <div class="_editButton">
          <van-button @click="redact(false, item)" :icon="deleteIcon" color="#fff"> </van-button>
          {{ item.comboNum }}
          <van-button @click="redact(true, item)" :icon="addIcon" color="#fff"> </van-button>
        </div>
      </div>
      <div class="hand_button">
        <van-button
          type="default"
          style="margin-right: 36px"
          @click="emit('popupClose')"
          size="small"
          >取消</van-button
        >
        <van-button type="success" size="small" @click="editComboNum()">确定</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, reactive, watch, computed } from 'vue'
import deleteIcon from '@/assets/images/delete.png'
import addIcon from '@/assets/images/add.png'

const props = defineProps({
  loopList: {
    type: Array,
  },
  showCenter: {
    type: Boolean,
  },
  machineType: {
    type: String,
  },
})

const list = ref([])

watch(
  () => props.loopList,
  (newVal) => {
    if (newVal.length > 1) {
      list.value = filterData(newVal)
    } else {
      list.value = newVal
    }
  },
  {
    deep: true,
  },
)
/** 修改数量 */
const redact = (type, item) => {
  console.log('修改数量', type, props.machineType, item)
  if (type) {
    switch (props.machineType) {
      case '2':
        item.comboNum < 1 ? item.comboNum++ : null
        break
      case '3':
        item.comboNum < 3 ? item.comboNum++ : null
        break
      case '4':
        item.comboNum < 3 ? item.comboNum++ : null
        break
      case '5':
        item.comboNum < 3 ? item.comboNum++ : null
        break
    }
  } else {
    item.comboNum > 0 ? item.comboNum-- : null
  }
}

/**点击确定传回数据给父组件 */
const editComboNum = async () => {
  const qingList = []
  list.value.forEach((ev) => {
    props.loopList.forEach((item) => {
      if (ev.comboName === item?.comboName) {
        qingList.push({
          comboId: item.comboId,
          comboName: null,
          id: item.id,
          machineId: item.machineId,
          roadNumber: item.roadNumber,
          comboNum: String(ev.comboNum),
        })
      }
    })
  })
  emit('editComboNum', qingList)
  emit('popupClose')
}

/**过滤数据出给弹出层的数据 */
const filterData = (list) => {
  const uniqueDataArray = list
    .filter(
      (obj, index, self) =>
        index === self.findIndex((item) => item && obj && item.comboId === obj.comboId),
    )
    .map((item) => {
      return { ...item }
    })

  return uniqueDataArray
}
const emit = defineEmits(['popupClose', 'editComboNum'])
</script>

<style lang="scss" scoped>
._title,
._editButton,
.hand_button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 218px;
}
._title {
  justify-content: center;
  font-size: 14px;
  color: #000;
}
.hand_button {
  padding: 0 40px 25px;
}
._editButton {
  margin: 10px 0;
  padding: 0 30px;
  font-size: 16px;
}
</style>
